<template>
  <div id="app">
    <div>
      <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width: 100%;">
      </el-cascader>
    </div>
  </div>
</template>

<script>
import { regionData , CodeToText, TextToCode} from "element-china-area-data";

export default {
  name: "SelectSsx",
  props: {
    value: {
      type: Object,
      default: {},
    },
  },

  computed: {
    selectedOptions() {
      let selectedOptions = [];
      console.log(this.value.code+"1")
      if(this.value != null && this.value.code != null){
        var codes = this.value.code.split(",");
        for(let i=0;i<codes.length;i++){
          selectedOptions.push(codes[i]);
        }
      }
      return selectedOptions;
    }
  },

  data() {
    return {
      options: regionData,
    };
  },
  methods: {
    handleChange(e) {
      let loc = "";
      for (let i = 0; i < e.length; i++) {
        if(loc == ""){
          loc = CodeToText[e[i]];
        }else{
          loc += "," + CodeToText[e[i]];
        }
      }
      let res = {name:loc,code:e.toString()};
      console.log(res);
      this.$emit('input', res)
    }
  }
};
</script>
